<template>
	<view>
		<view class="share-btn">
			<view class="share-b" @tap="showV">
				<text class="myicon myicon-fenxiang"></text>
				<view>分享</view>
			</view>
			<view class="kef-b">
				<button open-type="contact" plain></button>
				<text class="yticon icon-xiaoxi"></text>
				<view>客服</view>
			</view>
		</view>
		<view v-if="tcShow" class="share-tc" @tap="hideV">
			<view class="share-tc-b">
				<view class="share-tc-t">分享</view>
				<view class="share-tc-b-v">
					<button open-type="share" plain></button>
					<image src="../../static/i-wx.png" mode="widthFix"></image>
					<view>好友</view>
				</view>
				<view class="share-tc-b-v" @tap.stop="createHb">
					<image src="../../static/i-hb.png" mode="widthFix"></image>
					<view>海报</view>
				</view>
			</view>
		</view>
		<wm-poster v-if="hbCreate" @success="wmPosterSuccess" :imgSrc="imgSrc" :QrSrc="QrSrc" :Title="Title" :PriceTxt="PriceTxt"
		 :OriginalTxt="OriginalTxt"></wm-poster>
	</view>
</template>

<script>
	import wmPoster from "@/components/wm-poster/wm-poster.vue";
	export default {
		components: {
			wmPoster
		},
		name: 'my-share',
		data() {
			return {
				tcShow: false, //弹窗显示
				hbCreate: false, //海报组件生成
				imgSrc: 'https://cdn.weipaitang.com/img/202004026155306o-nv59-jqu1-t274-585833651404-W1728H2304/w/320', //图片链接地址
				QrSrc: 'https://cdn.weipaitang.com/img/202004026155306o-nv59-jqu1-t274-585833651404-W1728H2304/w/320', //二维码链接地址
				Title: '文本标题', //文本标题
				PriceTxt: '999.00', //价格显示
				OriginalTxt: '9999.00' //划线价显示

			}
		},

		methods: {
			/*----------------------点击-------------------------------*/
			/**
			 * 生成海报点击
			 */
			createHb: function() {
				console.log('生成海报点击----------')
				this.hbCreate = true;
				uni.showLoading({
					title: '生成中'
				})
			},

			/**
			 * 海报生成成功
			 */
			wmPosterSuccess: function(e) {
				uni.hideLoading();
				console.log('海报生成成功------', e)
				this.tcShow = false;
				this.hbCreate = false;
				if (e.tempFilePath) {
					uni.previewImage({
						urls: [e.tempFilePath + '']
					})
				}
			},

			/**
			 * 隐藏弹窗
			 */
			hideV: function() {
				this.tcShow = false;
			},
			/**
			 * 显示弹窗
			 */
			showV: function() {
				this.tcShow = true;
			},
		}
	}
</script>

<style lang="scss">
	/*
		自定义字体图标
	*/
	@font-face {
		font-family: myicon;
		font-weight: normal;
		font-style: normal;
		src: url('//at.alicdn.com/t/font_1325746_bc4gduicvlp.ttf') format('truetype');
		/* ,url('../../static/iconfont.ttf') format('truetype'); */
	}

	.myicon {
		font-family: "myicon" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.myicon-fenxiang:before {
		content: "\e620";
	}

	.share-btn {
		position: fixed;
		right: 10rpx;
		bottom: 200rpx;
		z-index: 111;

		.share-b,
		.kef-b {
			width: 90rpx;
			height: 90rpx;
			text-align: center;
			background-color: rgba(0, 0, 0, .5);
			color: #fff;
			border-radius: 90rpx;
			margin-bottom: 30rpx;
			padding-top: 10rpx;
			position: relative;

			button {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				border: none;
			}

			text {
				font-size: 38rpx;
			}

			view {
				width: 100%;
				font-size: 20rpx;
			}

		}
	}

	.share-tc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 111;
	}

	.share-tc-b {
		position: fixed;
		bottom: 0;
		width: 100vw;
		background-color: #fff;
		float: left;

		.share-tc-t {
			width: 100%;
			height: 94rpx;
			line-height: 94rpx;
			text-align: center;
			border-bottom: 2rpx solid #EEEEEE;
			float: left;
			font-size: 30rpx;
			font-weight: bold;
		}

		.share-tc-b-v {
			width: 50%;
			float: left;
			margin: 30rpx 0;
			position: relative;

			button {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				border: none;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin: 10rpx calc((100% - 100rpx)/2);
			}

			view {
				width: 100%;
				font-size: 26rpx;
				color: #606266;
				text-align: center;
			}
		}
	}
</style>
